.axiom-advanced-filter {
  // 筛选器侧边栏样式
  .filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--axiom-advanced-filter-overlay-bg, rgba(0, 0, 0, 0.5));
    z-index: var(--axiom-advanced-filter-z-index, 9999);
    backdrop-filter: var(--axiom-advanced-filter-overlay-blur, 8px);
    -webkit-backdrop-filter: var(--axiom-advanced-filter-overlay-blur, 8px);
    
    .filter-sidebar {
      position: absolute;
      right: 0;
      top: var(--axiom-advanced-filter-sidebar-top, var(--expected-header-height, 60px));
      bottom: 0;
      width: var(--axiom-advanced-filter-sidebar-width, 320px);
      background: var(--bg-color);
      box-shadow: var(--axiom-advanced-filter-sidebar-shadow, -4px 0 20px rgba(0, 0, 0, 0.15));
      display: flex;
      flex-direction: column;
      z-index: var(--axiom-advanced-filter-sidebar-z-index, 10000);
      
      .filter-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        
        .filter-scroll-area {
          flex: 1;
          overflow-y: auto;
          padding: var(--axiom-advanced-filter-scroll-padding, 16px);
          background: var(--bg-color);
          
          .filter-grid {
            display: flex;
            flex-direction: column;
            gap: var(--axiom-advanced-filter-grid-gap, 12px);
            
            .filter-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: var(--axiom-advanced-filter-item-padding, 16px 12px);
              background: var(--axiom-advanced-filter-item-bg, var(--bg-color-tertiary));
              border-radius: var(--axiom-advanced-filter-item-radius, 8px);
              cursor: pointer;
              transition: var(--axiom-advanced-filter-item-transition, all 0.2s ease);
              border: 1px solid transparent;
              
              &:hover {
                background: var(--axiom-advanced-filter-item-hover-bg, var(--bg-color-secondary));
                border-color: var(--axiom-advanced-filter-item-hover-border-color, var(--border-color-emphasis, var(--border-color)));
                transform: var(--axiom-advanced-filter-item-hover-transform, translateY(-1px));
              }
              
              &:active {
                transform: var(--axiom-advanced-filter-item-active-transform, translateY(0));
                background: var(--axiom-advanced-filter-item-active-bg, var(--primary-color-light));
              }
            }
          }
        }
        
        .filter-actions {
          position: sticky;
          bottom: 0;
          z-index: var(--axiom-advanced-filter-actions-z-index, 10001);
          display: flex;
          gap: var(--axiom-advanced-filter-actions-gap, 12px);
          padding: var(--axiom-advanced-filter-actions-padding, 16px);
          border-top: var(--axiom-advanced-filter-actions-border-top, 1px solid var(--border-color));
          background: var(--bg-color);
          box-shadow: var(--axiom-advanced-filter-actions-shadow, 0 -2px 4px rgba(0, 0, 0, 0.05));
          
          .axiom-button {
            height: var(--axiom-advanced-filter-btn-height, 44px) !important;
            border-radius: var(--axiom-advanced-filter-btn-radius, 8px) !important;
            font-size: var(--axiom-advanced-filter-btn-font-size, 14px) !important;
            font-weight: var(--axiom-advanced-filter-btn-font-weight, 500) !important;
            transition: var(--axiom-advanced-filter-btn-transition, all 0.2s ease) !important;
            cursor: pointer !important;
            
            &:nth-child(1) {
              flex: 0 0 auto !important;
              min-width: var(--axiom-advanced-filter-reset-btn-min-width, 80px) !important;
              background: transparent !important;
              color: var(--axiom-advanced-filter-reset-btn-color, var(--text-color-light)) !important;
              border: var(--axiom-advanced-filter-reset-btn-border, 1px solid var(--border-color)) !important;
              
              &:hover {
                background: var(--axiom-advanced-filter-reset-btn-hover-bg, var(--bg-color-tertiary)) !important;
                color: var(--axiom-advanced-filter-reset-btn-hover-color, var(--text-color)) !important;
                border-color: var(--axiom-advanced-filter-reset-btn-hover-border-color, var(--border-color-emphasis, var(--border-color))) !important;
              }
            }
            
            &:nth-child(2) {
              flex: 1 !important;
              background: var(--primary-color) !important;
              color: var(--axiom-advanced-filter-confirm-btn-color, white) !important;
              border: var(--axiom-advanced-filter-confirm-btn-border, 1px solid var(--primary-color)) !important;
              font-weight: var(--axiom-advanced-filter-confirm-btn-font-weight, 600) !important;
              
              &:hover {
                background: var(--axiom-advanced-filter-confirm-btn-hover-bg, var(--primary-color-dark, var(--primary-color))) !important;
                transform: var(--axiom-advanced-filter-confirm-btn-hover-transform, translateY(-1px)) !important;
                box-shadow: var(--axiom-advanced-filter-confirm-btn-hover-shadow, 0 4px 12px rgba(var(--primary-color-rgb, 147, 51, 234), 0.3)) !important;
              }
              
              &:active {
                transform: var(--axiom-advanced-filter-confirm-btn-active-transform, translateY(0)) !important;
              }
            }
          }
        }
      }
    }
  }
}

// 移动端适配
@media (max-width: 768px) {
  .axiom-advanced-filter {
    .filter-overlay .filter-sidebar {
      width: var(--axiom-advanced-filter-mobile-sidebar-width, 280px);
      top: var(--axiom-advanced-filter-mobile-sidebar-top, var(--expected-header-height, 50px));
      
      .filter-content {
        .filter-scroll-area {
          padding: var(--axiom-advanced-filter-mobile-scroll-padding, 12px);
        }
        
        .filter-actions {
          padding: var(--axiom-advanced-filter-mobile-actions-padding, 12px);
          gap: var(--axiom-advanced-filter-mobile-actions-gap, 8px);
        }
      }
    }
  }
}

// 小屏幕设备进一步优化
@media (max-width: 480px) {
  .axiom-advanced-filter {
    .filter-overlay .filter-sidebar {
      width: var(--axiom-advanced-filter-sm-sidebar-width, 100%);
      top: var(--axiom-advanced-filter-sm-sidebar-top, var(--expected-header-height, 50px));
      
      .filter-content {
        .filter-scroll-area {
          padding: var(--axiom-advanced-filter-sm-scroll-padding, 16px 12px);
          
          .filter-grid .filter-item {
            padding: var(--axiom-advanced-filter-sm-item-padding, 18px 12px);
          }
        }
        
        .filter-actions {
          padding: var(--axiom-advanced-filter-sm-actions-padding, 16px 12px);
          
          .axiom-button {
            height: var(--axiom-advanced-filter-sm-btn-height, 48px) !important;
          }
        }
      }
    }
  }
} 